<template>
  <div class="cont-wrapper nva_menu_container">
    <div class="menu_container wst">
      <kw-navmenu ref="navMenu" title="考生信息管理" @select="changeSchool"></kw-navmenu>
    </div>
    <div class="block-container container">
      <div class="title">考生信息管理</div>
      <div class="filter-box">
        <el-form :inline="true">
          <el-form-item label="姓名：">
            <el-input v-model="filter.name"></el-input>
          </el-form-item>
          <el-form-item label="学校:">
            <!-- <el-input v-model="filter.schoolName"></el-input> -->
            <el-select class="mx-select" filterable v-model="filter.schoolName" placeholder="请选择">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.name"
                :value="item.name">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="学籍号:">
            <el-input v-model="filter.code"></el-input>
          </el-form-item>
          <el-form-item label="准考证号:">
            <el-input v-model="filter.ticketCard"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="c-btn va-top" type="primary" @click="handleFilter">搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="operation">
        <el-button type="primary" class="c-btn" @click="refresh">刷新数据</el-button>
        <el-button type="primary" class="c-btn" :loading="exportDataLoading" @click="exportStudentData">导出数据</el-button>
      </div>
      <div class="table-wrapper">
        <el-table :data="tableData" border class="c-table" style="width: 100%" v-loading="loading">
          <el-table-column label="#" width="70">
            <template slot-scope="scope">
              {{ (listQuery.page - 1) * listQuery.pageSize  + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="考生姓名"></el-table-column>
          <el-table-column prop="sex" label="性别" width="70"></el-table-column>
          <el-table-column prop="schoolName" label="所在学校"></el-table-column>
          <el-table-column prop="className" label="班级" width="120"></el-table-column>
          <el-table-column prop="code" label="学籍号"></el-table-column>
          <el-table-column prop="ticketCard" label="准考证号">
            <template slot-scope="scope">
              <span v-if="scope.row.ticketCard">{{ scope.row.ticketCard }}</span>
              <span class="none" v-else>—</span>
            </template>
          </el-table-column>
          <el-table-column prop="photo" label="考生照片">
            <template slot-scope="scope">
              <span class="btn-txt" v-if="scope.row.photo" @click="previewPhoto(scope.row)">查看照片</span>
              <span class="none" v-else>未上传</span>
            </template>
          </el-table-column>
        </el-table>
        <kw-pagination v-if="tableData.length" :listQuery="listQuery" @changeCurrentPage="changeCurrentPage"></kw-pagination>
      </div>
    </div>

    <!-- 查看考生照片 -->
    <el-dialog :visible.sync="previewPhotoVisible" title="查看考生照片" custom-class="c-dialog" width="30%">
      <div class="dialog-cont">
        <div class="student-info-wrapper" v-if="studentInfo">
          <div class="student-photo">
            <img :src="studentInfo.photo">
          </div>
          <div class="student-info">
            <div class="si-item">
              <label>考生姓名：</label>
              <span>{{ studentInfo.name }}</span>
            </div>
            <div class="si-item">
              <label>性别：</label>
              <span>{{ studentInfo.sex }}</span>
            </div>
            <div class="si-item">
              <label>所在学校：</label>
              <span>{{ studentInfo.schoolName }}</span>
            </div>
            <div class="si-item">
              <label>所在班级：</label>
              <span>{{ studentInfo.className }}</span>
            </div>
            <div class="si-item">
              <label>学籍号：</label>
              <span>{{ studentInfo.code }}</span>
            </div>
            <div class="si-item">
              <label>准考证号：</label>
              <span>{{ studentInfo.ticketCard }}</span>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="c-btn" type="primary" @click="previewPhotoVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import kwContsidebar from '@/components/ContSidebar.vue'
import kwNavmenu from '@/components/ContMenu.vue'
import kwPagination from '@/components/Pagination.vue'
import contSidebar from '@/components/navSidebar.vue'
export default {
  name: 'studentInfo',
  components: {
    kwNavmenu,
    kwPagination,
    contSidebar
  },
  data () {
    return {
      filter: {
        name: null,
        schoolName: null,
        code: null,
        ticketCard: null
      },
      tableData: [],
      // 预览图片
      previewPhotoVisible: false,
      exportDataLoading: false,
      listQuery: {
        page: 1,
        pageSize: 10,
        total: null,
        totalPages: null
      },
      studentInfo: null,
      loading: false,
      userData: '',
      activeItem: 0,
      schoolList: [],
      list: []
    }
  },
  mounted () {
    this.userData = JSON.parse(sessionStorage.getItem('userData'))
    this.getSchoolList().then(res => {
      // if (this.userData.roleKey !== 'city') {
      //   this.$refs.contSideBar.setActiveId(this.list[0].id)
      // }
    })
  },
  methods: {
    // 预览图片
    previewPhoto (student) {
      this.studentInfo = student
      this.previewPhotoVisible = true
    },
    // 获取学生信息列表
    getStudentInfoList () {
      let that = this
      that.loading = true
      let qsData = {
        code: that.filter.code,
        name: that.filter.name,
        page: that.listQuery.page,
        pageSize: that.listQuery.pageSize,
        schoolName: that.filter.schoolName,
        ticketCard: that.filter.ticketCard
      }
      that.$http.getStudentInfoList(qsData).then(res => {
        if (res.code === 20000) {
          that.tableData = res.data.content
          that.listQuery.total = res.data.totalElements
          that.listQuery.totalPages = res.data.totalPages
        } else {
          that.$message.error(res.msg)
        }
        that.loading = false
      })
    },
    // 搜索学生信息
    handleFilter () {
      this.listQuery.page = 1
      let _id = ''
      this.schoolList.map((item, idx) => {
        item.child.map((item2, idx2) => {
          if (item2.areaName === this.filter.schoolName) {
            _id = item2.id
          }
        })
      })
      if (this.userData.roleKey === 'city') {
        this.$refs['navMenu'].changeActive(_id)
      } else {
        this.activeItem = _id
      }
      this.getStudentInfoList()
    },
    // 翻页
    changeCurrentPage (queryData) {
      this.listQuery.page = queryData.page
      this.listQuery.pageSize = queryData.pageSize
      this.getStudentInfoList()
    },
    // 刷新
    refresh () {
      this.getStudentInfoList()
    },
    // 导出数据
    exportStudentData () {
      let that = this
      that.exportDataLoading = true
      that.$http.exportStudentData({ schoolName: that.filter.schoolName }).then(res => {
        console.log(res)
        if (res.code === 20000) {
          window.open(res.data)
        } else {
          that.$message.error(res.msg)
        }
        that.exportDataLoading = false
      })
    },
    // 选择学校
    changeSchool (id, name) {
      this.filter.schoolName = name
      this.getStudentInfoList()
    },
    // 菜单回调
    handleAcitve (obj) {
      this.activeItem = obj.id
      this.$set(this.filter, 'schoolName', obj.name)
      this.getStudentInfoList()
    },
    // 获取学校数据
    async getSchoolList () {
      let that = this
      let temp = []
      let res = await that.$http.getArea()
      if (res.code === 20000) {
        that.schoolList = res.data.child
        for (let i = 0; i < res.data.child.length; i++) {
          res.data.child[i].child.map((item) => {
            temp.push({
              id: item.id,
              name: item.areaName
            })
          })
          if (res.data.child[i].areaName === sessionStorage.getItem('area')) {
            res.data.child[i].child.map((item) => {
              this.list.push({
                id: item.id,
                name: item.areaName
              })
            })
          }
        }
        if (this.userData.roleKey === 'city') {
          this.list = temp
        } else {
          this.activeItem = this.list[0].id
          this.filter.schoolName = this.list[0].name
        }
        this.getStudentInfoList()
      } else {
        that.$message.error(res.msg)
      }
    }
  }
}
</script>
